<template>
  <view class="capitalTransfer_outer">
    <view class="capitalTransfer_inner">
      <view class="record_header">
        <u-navbar :autoBack="true" height="152rpx" bgColor="#FFFAEF" :fixed="true" :border="true" :placeholder="true"
          @rightClick="goTransferRecordPage">
          <view slot="left" class="record_header_back">
            <image src="@/static/record/goback.png"></image>
          </view>
          <view slot="center" class="record_header_title">积分划转</view>
          <view slot="right" class="record_header_icon">
            <image src="@/static/capitalTransfer/accountBook.png"></image>
          </view>
        </u-navbar>
      </view>
      <view class="capitalTransfer_content">
        <view class="capitalTransfer_content_select">
          <view v-for="(item, index) in selectList" :key="item.id" @click="changeSelectIndex(index)">
            <image src="@/static/capitalTransfer/select.png" v-if="selectIndex == index"></image>
            <image src="@/static/capitalTransfer/noselect.png" v-if="selectIndex != index"></image>
            <text :class="selectIndex == index ? 'active' : ''">{{
              item.name
            }}</text>
          </view>
        </view>
      </view>
      <view class="capitalTransfer_cell">
        <u-cell-group :border="false">
          <u-cell :border="false">
            <view class="icon" slot="icon">从</view>
            <view class="title" slot="title" v-if="selectIndex == 2"><text>{{ columns2[0] }}</text></view>
            <view class="title" slot="title" v-else><text>{{ columns[0] }}</text></view>
          </u-cell>
          <view class="capitalTransfer_cell_transition">
            <view class="card_box_swap_img" @click="confirmDealAccount">
              <image src="@/static/home/swap.png"></image>
            </view>
          </view>
          <u-cell :border="false">
            <view class="icon" slot="icon">到</view>
            <view class="title" slot="title" v-if="selectIndex == 2"><text>{{ columns2[1] }}</text>
            </view>
            <view class="title" slot="title" v-else><text>{{ columns[1] }}</text></view>
          </u-cell>
        </u-cell-group>
      </view>
      <view class="capitalTransfer_form">
        <u--form labelPosition="left" ref="uForm">
          <u-form-item ref="item1">
            <view class="capitalTransfer_form_num">
              <view class="capitalTransfer_form_num_ipt"><input border="none" placeholder="请输入数量" type="number" min="1"
                  v-model="transferNum" /></view>
              <view v-if="selectIndex == 2">k</view>
              <view class="capitalTransfer_form_num_btn" @click="maxTransferNum" v-if="toAccountTypeIndex == 2">
                <text>最大</text>
              </view>
            </view>
          </u-form-item>
        </u--form>
        <view class="capitalTransfer_form_hign" v-if="toAccountTypeIndex == 2">
          <text class="capitalTransfer_form_hign_text">最多可转</text>
          <text class="capitalTransfer_form_hign_num" v-if="selectIndex == 0">
            {{ userProperty.cloudBean }} 云豆</text>
          <text class="capitalTransfer_form_hign_num" v-if="selectIndex == 1">
            {{ userProperty.goldBean }} 金豆</text>
          <text class="capitalTransfer_form_hign_num" v-if="selectIndex == 2">
            {{ (Math.floor(userProperty.diamond) / 1000).toFixed(3) }}K 钻石</text>
          <text class="capitalTransfer_form_hign_num" v-if="selectIndex == 3">
            {{ userProperty.proxy }} 云豆</text>
        </view>
        <view class="capitalTransfer_form_hign" v-if="toAccountTypeIndex == 1">
          <text class="capitalTransfer_form_hign_text">账户余额</text>
          <text class="capitalTransfer_form_hign_num" v-if="selectIndex == 0">
            {{ YunyouProperty.cloudBean }} 云豆</text>
          <text class="capitalTransfer_form_hign_num" v-if="selectIndex == 1">
            {{ YunyouProperty.goldBean }} 金豆</text>
          <text class="capitalTransfer_form_hign_num" v-if="selectIndex == 2">
            {{ ShandianProperty.diamond ? (ShandianProperty.diamond / 1000).toFixed(3) : 0 }}K 钻石</text>
          <text class="capitalTransfer_form_hign_num" v-if="selectIndex == 3">
            {{ YunyouProperty.proxyCloudBean }} 云豆</text>
        </view>
        <view class="procedure_price" v-if="toAccountTypeIndex == 1">
          <view class="procedure_price_left" v-if="selectIndex == 0"><text>提云豆手续费:</text></view>
          <view class="procedure_price_left" v-if="selectIndex == 2"><text>提钻石手续费:</text></view>
          <view class="procedure_price_right" v-if="selectIndex == 0 || selectIndex == 2"><text>{{ ratioPrice }}</text>
          </view>
        </view>
        <view class="service_charge" v-if="toAccountTypeIndex == 1">
          <view v-if="selectIndex == 0 || selectIndex == 2">
            <view class="service_charge_title"><text>手续费减免说明：</text></view>
            <view class="service_charge_cont" v-if="selectIndex == 2">
              <text class="service_charge_cont_title">
                开通闪电纪元权益降低手续费
              </text>
              <text class="service_charge_cont_clause">
                1.至尊月卡手续费降低30%
                2.VIP月卡手续费降低20%
                3.双卡开通手续费全免
              </text>
            </view>
            <view class="service_charge_cont" v-if="selectIndex == 0">
              <text class="service_charge_cont_title">
                开通云乐个游VIP手续费全免
              </text>
              <!-- <text class="service_charge_cont_clause">
                1.至尊月卡手续费降低30%
                2.VIP月卡手续费降低20%
                3.双卡开通手续费全免
              </text> -->
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="capitalTransfer_form_affirm">
      <view class="capitalTransfer_affirm_btn" @click="affirmDeal"><text>确定</text></view>
    </view>
    <u-popup :show="isShowDealPwd" :round="10" mode="bottom" @close="isShowDealPwd = false" bgColor="#FFFAEF"
      overlayStyle="background:#FF831E;opacity: 0.25;" :closeOnClickOverlay="true">
      <view class="transaction_outer">
        <view class="transaction_title">
          <text>确认划转</text>
        </view>
        <view class="transaction_form">
          <u--form labelPosition="left" ref="uForm">
            <u-form-item ref="item1">
              <view class="transaction_form_pawsword">
                <view class="transaction_form_pawsword_img">
                  <image src="@/static/login/password.png"></image>
                </view>
                <u--input border="none" placeholder="请输入密码" v-model="payPassword"
                  :type="isShowPassword ? 'text' : 'password'">
                  <view slot="suffix" @click="isShowPassword = !isShowPassword" style="margin-right: 20rpx">
                    <u-icon name="eye-fill" v-if="isShowPassword"></u-icon>
                    <u-icon name="eye-off" v-else></u-icon>
                  </view>
                </u--input>
              </view>
            </u-form-item>
            <u-form-item ref="item4">
              <view class="transaction_form_pawsword_affirm">
                <view @click="getTransfer">
                  <text>确定</text>
                </view>
              </view>
            </u-form-item>
          </u--form>
        </view>
      </view>
    </u-popup>
    <u-picker v-if="selectIndex == 2" :show="showAccountTypePicker" :columns="columns2"
      @cancel="showAccountTypePicker = false" @confirm="confirmDealAccount" :defaultIndex="[0]"></u-picker>
    <u-picker v-else :show="showAccountTypePicker" :columns="columns" @cancel="showAccountTypePicker = false"
      @confirm="confirmDealAccount" :defaultIndex="[0]"></u-picker>
    <u-modal :show="showPayPwdmodal" title="您还未设置支付密码，是否前去设置？" cancelText="再等等" confirmText="马上去" :showCancelButton="true"
      @cancel="showPayPwdmodal = false" @confirm="goSetPasswordPage"></u-modal>

  </view>
</template>

<script>
import { reqTransfer, reqTransferConfig, reqYunyouProperty, reqShandianProperty } from "@/api/capitalTransfer.js";
import { reqUserProperty } from "@/api/my.js";
import { reqBourseUserInfo } from '@/api/all.js'

export default {
  data() {
    return {
      // 选择哪种资产的下标
      selectIndex: 0,
      //  资产种类列表
      selectList: [
        {
          id: 0,
          name: "云豆",
        },
        {
          id: 1,
          name: "金豆",
        },
        {
          id: 2,
          name: "钻石",
        },

      ],
      //   是否展示输入交易密码框
      isShowDealPwd: false,
      columns: ["当前账户", "云游账户"],
      columns2: ["当前账户", "闪电纪元"],
      showAccountTypePicker: false,
      toAccountTypeIndex: 2,
      // 划转数量
      transferNum: "",
      // 支付密码
      payPassword: "",
      // 手续费
      ratioPrice: 0,
      userProperty: {},
      isShowPassword: false,
      YunyouProperty: {},
      ShandianProperty: {},
      showPayPwdmodal: false

    };
  },
  onLoad() {
    this.getTransferConfig();
    this.getUserProperty();
    this.getBourseUserInfo()
    this.getYunyouProperty()
    this.getShandianProperty()
  },
  methods: {
    // 跳转设置密码页面
    goSetPasswordPage() {
      this.showPayPwdmodal = false

      uni.navigateTo({
        url: `/pages/setPassword/index?pagename=pay`,
      });
    },
    // 交易所用户信息
    async getBourseUserInfo() {
      const result = await reqBourseUserInfo()
      if (result.code == 200) {
        if (result.data.position == 0) return
        this.selectList.push({
          id: 3,
          name: "代理库划转",
        },)
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
    // 云游用户资产
    async getYunyouProperty() {
      const result = await reqYunyouProperty()
      if (result.code == 200) {
        this.YunyouProperty = result.data
      } else {
        uni.showToast({
          title: result.msg,
          icon: "none",
        });
      }
    },
    // 闪电纪元账户余额
    async getShandianProperty() {
      const result = await reqShandianProperty()
      if (result.code == 200) {
        this.ShandianProperty = result.data
      } else {
        uni.showToast({
          title: result.msg,
          icon: "none",
        });
      }
      console.log(result);
    },
    // 切换资产种类
    changeSelectIndex(index) {
      this.transferNum = ''
      this.selectIndex = index;
      this.toAccountTypeIndex = 2;
      this.columns = ["当前账户", "云游账户"]
      this.columns2 = ["当前账户", "闪电纪元"]
      this.getTransferConfig();
    },
    // 确认交易
    affirmDeal() {
      if (uni.getStorageSync('userInfo')?.setPayPwd == 0) {
        this.showPayPwdmodal = true
        return
      }
      if (!this.transferNum) {
        uni.showToast({
          title: "请输入划转数量",
          icon: "none",
        });
        return;
      }
      if (this.selectIndex != 2) {
        console.log(this.transferNum.toString().split(".")[1]);

        if (this.transferNum.toString().split(".")[1] ||
          this.transferNum < 1) {
          console.log(89);
          uni.showToast({
            title: "划转数量最小为1且为整数",
            icon: "none",
          });
          return;

        }

      }
      if (this.selectIndex == 2) {
        if (this.transferNum.toString().split(".")[1] && this.transferNum.toString().split(".")[1].length > 3) {

          uni.showToast({
            title: "钻石划转数量最多输入三位小数",
            icon: "none",
          });
          return;
        }
      }

      this.payPassword = "";
      this.isShowDealPwd = true;
    },
    // 确认交易账户
    confirmDealAccount() {
      // this.showAccountTypePicker = false;

      if (this.selectIndex == 2) {
        this.columns2 = this.columns2.reverse()
        this.toAccountTypeIndex =
          this.columns2[0] == '当前账户' ? 2 : 1;
      } else {
        this.columns = this.columns.reverse()
        this.toAccountTypeIndex =
          this.columns[0] == '当前账户' ? 2 : 1;
      }
      this.getTransferConfig();
    },
    // 跳转划转记录页面
    goTransferRecordPage() {
      uni.navigateTo({
        url: "/pages/transferRecord/index",
      });
    },
    // 划转
    async getTransfer() {
      let sendData;
      if (!this.payPassword) {
        uni.showToast({
          title: "请输入支付密码",
          icon: "none",
        });
        return;
      }
      if (this.selectIndex == 2) {
        sendData = {
          currencyId: this.selectIndex + 1,
          transactionType: this.toAccountTypeIndex,
          number: this.transferNum * 1000,
          payPassword: this.payPassword,
        };
      } else {
        sendData = {
          currencyId: this.selectIndex + 1,
          transactionType: this.toAccountTypeIndex,
          number: this.transferNum * 1,
          payPassword: this.payPassword,
        };
      }

      const result = await reqTransfer(sendData);
      if (result.code == 200) {
        uni.showToast({
          title: "划转成功",
          icon: "success",
        });
        this.isShowDealPwd = false;
        this.getUserProperty();
        this.getYunyouProperty()
        this.getShandianProperty()
      } else {
        uni.showToast({
          title: result.msg,
          icon: "none",
        });
      }
    },
    // 划转手续费配置
    async getTransferConfig() {
      if (this.selectIndex == 3) {
        this.ratioPrice = '免手续费'
        return
      }
      const result = await reqTransferConfig(
        this.selectIndex + 1,
        this.toAccountTypeIndex
      );
      if (result.code == 200) {
        this.ratioPrice = result.data.ratio == 0 ? 0 : `${result.data.ratio}%`;
      } else {
        uni.showToast({
          title: result.msg,
          icon: "none",
        });
      }
    },
    // 请求用户资产信息
    async getUserProperty() {
      const result = await reqUserProperty();
      if (result.code == 200) {
        this.userProperty = result.data;
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
    // 点击最大
    maxTransferNum() {
      switch (this.selectIndex) {
        case 0:
          this.transferNum = this.toAccountTypeIndex == 2 ? Math.floor(this.userProperty.cloudBean) : Math.floor(this.YunyouProperty.cloudBean);
          break;
        case 1:
          this.transferNum = this.toAccountTypeIndex == 2 ? Math.floor(this.userProperty.goldBean) : Math.floor(this.YunyouProperty.goldBean);
          break;
        case 2:
          this.transferNum = this.toAccountTypeIndex == 2 ? (Math.floor(this.userProperty.diamond) / 1000).toFixed(3) : (Math.floor(this.userProperty.ShandianProperty) / 1000).toFixed(3);
          break;
        case 3:
          this.transferNum = Math.floor(this.userProperty.proxy);
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.capitalTransfer_outer {
  width: 100vw;
  height: 100vh;
  background: #fffaef;

  .capitalTransfer_inner {
    height: 80%;
    overflow: auto;
  }

  .record_header {
    .record_header_title {
      font-size: 46rpx;
      font-family: DreamHanSansSC;
      font-weight: 600;
      color: #302b26;
    }

    .record_header_back {
      width: 46rpx;
      height: 46rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .record_header_icon {
      width: 38rpx;
      height: 38rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .capitalTransfer_content {
    border-top: 2rpx solid rgba(183, 178, 169, 0.35);

    .capitalTransfer_content_select {
      display: flex;
      align-items: center;
      column-gap: 50rpx;
      margin-left: 44rpx;
      margin-top: 42rpx;

      view {
        display: flex;
        align-items: center;
        column-gap: 10rpx;
      }

      image {
        width: 34rpx;
        height: 34rpx;
      }

      text {
        font-size: 28rpx;
        font-family: DreamHanSansSC;
        font-weight: 800;
        color: rgb(90, 88, 84, 0.6);
      }

      .active {
        color: #37322c;
      }
    }
  }

  .capitalTransfer_cell {
    margin-top: 90rpx;

    .icon {
      font-size: 25rpx;
      font-family: DreamHanSansSC;
      font-weight: normal;
      color: #6c6862;
    }

    .title {
      margin-top: 6rpx;

      text {
        font-size: 28rpx;
        font-family: DreamHanSansSC;
        font-weight: 500;
        color: #37322c;
      }
    }

    .capitalTransfer_cell_transition {
      display: flex;
      justify-content: center;

      .card_box_swap_img {
        width: 70rpx;
        height: 70rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .capitalTransfer_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 70rpx;

    .capitalTransfer_form_num {
      width: 663rpx;
      height: 109rpx;
      border: 6rpx solid #ff9e3c;
      border-radius: 26rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .capitalTransfer_form_num_ipt {
        margin-left: 46rpx;
      }

      .capitalTransfer_form_num_btn {
        width: 98rpx;
        height: 47rpx;
        border: 2rpx solid rgb(48, 43, 38, 0.5);
        border-radius: 17rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 42rpx;

        text {
          font-size: 26rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: rgb(48, 43, 38, 0.8);
        }
      }
    }

    .capitalTransfer_form_hign {
      width: 100%;

      text {
        font-size: 22rpx;
        font-family: DreamHanSansSC;
        font-weight: normal;
      }

      .capitalTransfer_form_hign_text {
        color: #99948d;
        margin-left: 88rpx;
      }

      .capitalTransfer_form_hign_num {
        color: #302b26;
      }
    }
  }

  .capitalTransfer_form_affirm {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 200rpx;

    .capitalTransfer_affirm_btn {
      position: fixed;
      bottom: 100rpx;
      width: 545rpx;
      height: 108rpx;
      background: linear-gradient(180deg, #ff7007 0%, #ffa749 100%);
      border-radius: 38rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      text {
        font-size: 38rpx;
        font-family: DreamHanSansSC;
        font-weight: 600;
        color: #ffffff;
      }
    }
  }

  .transaction_outer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 128rpx;

    .transaction_title {
      display: flex;
      justify-content: center;
      margin-top: 52rpx;

      text {
        font-size: 38rpx;
        font-family: DreamHanSansSC;
        font-weight: 600;
        color: #302b27;
      }
    }

    .transaction_form_pawsword {
      width: 545rpx;
      height: 109rpx;
      border: 3px solid #ff9e3c;
      border-radius: 26rpx;
      display: flex;
      align-items: center;

      .transaction_form_pawsword_img {
        width: 40rpx;
        height: 40rpx;
        margin-left: 14rpx;
        margin-right: 28rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .transaction_form_pawsword_affirm {
      position: fixed;
      display: flex;
      justify-content: center;
      margin-top: 120rpx;

      view {
        width: 545rpx;
        height: 108rpx;
        background: linear-gradient(to right, #ff7007 0%, #ffa749 100%);
        border-radius: 38rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        text {
          font-size: 38rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #ffffff;
        }
      }
    }
  }

  .service_charge {
    margin-top: 40rpx;

    .service_charge_title {
      font-size: 25rpx;
      font-family: Dream Han Sans SC;
      font-weight: normal;
      color: #6c6862;
    }

    .service_charge_cont {
      width: 649rpx;
      height: 217rpx;
      font-size: 25rpx;
      font-family: Dream Han Sans SC;
      font-weight: normal;
      color: #6c6862;
      line-height: 38rpx;
      opacity: 0.6;
      display: flex;
      flex-direction: column;

      text {
        margin-left: 40rpx;
      }
    }
  }

  .procedure_price {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40rpx;

    .procedure_price_left {
      font-size: 25rpx;
      font-family: Dream Han Sans SC;
      font-weight: normal;
      color: #6c6862;
      margin-left: 50rpx;
    }

    .procedure_price_right {
      font-size: 25rpx;
      font-family: Dream Han Sans SC;
      font-weight: normal;
      color: #6c6862;
      line-height: 38rpx;
      margin-right: 60rpx;
    }
  }
}
</style>
